<template>
    <view class="main">
        <view class="head">
            <view class="li">
                <text class="li-left">总金额(元)</text>
                <image
                    src="../../static/myAssets/head-ico.png"
                    class="head-ico"
                ></image>
            </view>
            <view class="li-coutn"> 0.00 </view>
            <view class="li-three">
                <view class="three-left">
                    今日收益 <text class="todayIncome">0.00</text>
                </view>
                <view class="three-left">
                    累计收益 <text class="todayIncome">0.00</text>
                </view>
            </view>
            <view class="head-foot">
                <view class="left">
					<navigator url="../huoqiproperty/huoqiproperty">
						<view class="foot-text topBox" >
						    <text class="first">活期</text>
						    <text class="scoed">灵活存取</text>
						</view>
					</navigator>
                   <navigator url="../dingqiproperty/dingqiproperty">
					   <view class="foot-text">
					       <text class="first">定期</text>
					       <text class="scoed">稳健收益</text>
					   </view>
				   </navigator>
                   
                </view>

                <view class="right">
					<navigator url="../jijinproperty/jijinproperty">
						<view class="foot-text topBox">
						    <text class="first">基金</text>
						    <text class="scoed">浮动收益</text>
						</view>
					</navigator>
                  <navigator url="../huangjinproperty/huangjinproperty">
					  <view class="foot-text">
					      <text class="first">黄金</text>
					      <text class="scoed">多元投资</text>
					  </view>
				  </navigator>
                   
                </view>
            </view>
        </view>

        <view class="nav">
            <image
                src="../../static/myAssets/nav.png"
                mode=""
                class="nav"
            ></image>
        </view>

        <view class="li-text"> <text class="link_"></text>人气精品<text class="link_"></text></view>

        <view class="footer">
            <view class="footer-left">
                <text class="title">国华节节高A款</text>
                <view class="num"> <view class="text">5.91</view>% </view>
                <text class="bottom-title">历史年化投资回报率</text>
            </view>
            <view class="footer-left">
                <text class="title">国华节节高A款</text>
                <view class="num"> <view class="text">5.91</view>% </view>
                <text class="bottom-title"
                    >灵活资金经30天年化投0天年化0天年化0天年化0天年化0天年化...</text
                >
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {};
    },
};
</script>

<style lang="scss" scoped>
@mixin border {
    border: 1px solid red;
}

@mixin border-shadow {
    box-shadow: 0 0 16rpx 0rpx rgba(0, 0, 0, 0.15);
}

@mixin flex-col {
    display: flex;
    flex-direction: column;
}

@mixin flex-row {
    display: flex;
    align-items: center;
}

$border-radius: 12rpx;
$font-color: #999999;
$font-size: 28rpx;

.main {
    display: flex;
    flex-direction: column;
    background-color: #f3f3f3;
    padding: 40rpx 24rpx;

    .head {
        // @include border();
        display: flex;
        flex-direction: column;
        background-color: #ffffff;
        border-radius: $border-radius;
        margin-bottom: 40rpx;
        padding: 40rpx;
        color: $font-color;
        font-size: $font-size;

        .li {
            @include flex-row();
            justify-content: space-between;

            .head-ico {
                width: 32rpx;
                height: 38rpx;
            }
        }

        .li-coutn {
            // @include border();
            font-size: 44rpx;
            color: #333;
            font-weight: bold;
            margin: 20rpx 0;
        }

        .li-three {
            // @include border();
            @include flex-row();
            justify-content: space-between;
            margin-bottom: 90rpx;
            font-size: 24rpx;

            .three-left {
                @include flex-row();

                .todayIncome {
                    color: #333;
                    margin-left: 20rpx;
                    font-size: 32rpx;
                }
            }
        }

        .head-foot {
            // @include border();
            @include flex-row();
            justify-content: space-between;

            .left {
                @include flex-col();
                width: 308rpx;
                border-right: 2rpx solid rgba(0, 0, 0, 0.08);
            }

            .right {
                @include flex-col();
                width: 270rpx;
            }

            .foot-text {
                @include flex-col();
                // @include border();
                .first {
                    font-size: 32rpx;
                    color: #333;
                    margin-bottom: 18rpx;
                }
            }

            .topBox {
                margin-bottom: 60rpx;
            }
        }
    }

    .nav {
        width: 100%;
        height: 204rpx;
    }

    .li-text {
        display: flex;
        justify-content: center;
		align-items: center;
        font-size: 28rpx;
        color: $font-color;
        margin: 40rpx 0;
		// @include border();
		.link_{
			width: 38rpx;
			height: 2rpx;
			background-color: $font-color;
			margin: 0 10rpx;
		}
    }
    .footer {
        @include flex-row();
        justify-content: space-between;
        .footer-left {
			@include flex-col();
            width: 336rpx;
            // height: 192rpx;
            box-sizing: border-box;
            padding: 30rpx;
            background-color: #fff;
            border-radius: $border-radius;
            .title {
                font-size: $font-size;
                color: #333;
            }
            .num {
                display: flex;
                align-items: flex-end;
                margin: 20rpx 0 18rpx 0;
                color: #f85656;
                font-size: 28rpx;
				font-weight: 900;
                .text {
                    font-size: 44rpx;
                }
            }
            .bottom-title {
                font-size: 24rpx;
                color: #999;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            // @include border();
        }
    }
}
</style>
